<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="./css/demo-common.css">
		<link rel="stylesheet" href="./css/atom-one-light.css">
		<script src="./js/jquery-2.2.3.min.js"></script>
		<script src="./js/highlight.pack.js"></script>
		<script src="../js/sideNav.js"></script>
	</head>
	<body>
		<ul class="side-nav">
			<li>
				<a href="#" class="nav-item">
					<i class="fa fa-bank nav-icon"></i>HTML
				</a>
			</li>
			<li>
				<a class="nav-head active">
					<i class="fa fa-envelope nav-icon"></i>CSS
				</a>
				<ul class="sub-nav active">
					<li><a href="#" class="nav-item lv2">二级导航1</a></li>
					<li><a href="#" class="nav-item lv2 active">二级导航2</a></li>
					<li><a href="#" class="nav-item lv2">二级导航3</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="nav-item">
					<i class="fa fa-search nav-icon"></i>JAVASCRIPT
				</a>
			</li>
			<li>
				<a href="#" class="nav-item">
					<i class="fa fa-refresh nav-icon"></i>LESS
				</a>
			</li>
		</ul>

		<div style="padding-left: 280px">
			<h3>SideNav侧边导航</h3>
			<p>侧边导航固定在屏幕左侧。</p>
			<br>
			<section>
				<div class="example">
					<p>默认的导航为白色背景。</p>
					<p>你可以定制或者移除<mark>.top-view</mark>（头部区域）。</p>
					<p>侧边导航<mark>.side-nav</mark>的默认宽度为<mark>280px</mark>，并且距屏幕顶部<mark>0px</mark>，使用时你可以手工修改。</p>
					<p>有子菜单的项目使用类<mark>.nav-head</mark>。其子菜单使用<mark>.sub-nav</mark>。</p>
					<p>二级导航需添加类<mark>.lv2</mark>，三级导航需添加类<mark>.lv3</mark>，以显示递进样式。导航不要超过三级。</p>
				</div>
				<pre class="html"><code>
	&lt;ul class="side-nav"&gt;
		&lt;li&gt;
			&lt;a href="#" class="nav-item"&gt;
				&lt;i class="fa fa-bank nav-icon"&gt;&lt;/i&gt;HTML
			&lt;/a&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;a class="nav-head active"&gt;
				&lt;i class="fa fa-envelope nav-icon"&gt;&lt;/i&gt;CSS
			&lt;/a&gt;
			&lt;ul class="sub-nav active"&gt;
				&lt;li&gt;&lt;a href="#" class="nav-item lv2"&gt;二级导航1&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="#" class="nav-item lv2 active"&gt;二级导航2&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="#" class="nav-item lv2"&gt;二级导航3&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;a href="#" class="nav-item"&gt;
				&lt;i class="fa fa-search nav-icon"&gt;&lt;/i&gt;JAVASCRIPT
			&lt;/a&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;a href="#" class="nav-item"&gt;
				&lt;i class="fa fa-refresh nav-icon"&gt;&lt;/i&gt;LESS
			&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
				</code></pre>
			</section>
		

		<h4>Javascript</h4>
		<section>
			<div class="example">
				<p>通常，你不需要手动初始化侧边菜单。</p>
				<p>仅当如下条件满足时，才需要通过javascript初始化：</p>
				<p>
				1. 侧边导航是动态创建的
				<br>
				2. 包含二级导航
				</p>
			</div>
			<pre><code>
	$('.side-nav').sideNav();
			</code></pre>
		</section>
		</div>

		<script>
		$(document).ready(function() {
			$('pre code').each(function(i, block) {
				hljs.highlightBlock(block);
			});
		});
		</script>
	</body>
</html>